<template>
	<Modal
		v-model="show"
		full-width
		:closable="false"
		:foot="$baseui_theme==='fk'"
		class="lexmis-ModalInstance"
		@hidden="$_lexmis_hidden">
		<template #title>
			<div>
				<Icon
					v-if="$baseui_theme!=='fk'"
					v-bind="iconInfo"/>
				<div class="lexmis_text">{{title}}</div>
			</div>
		</template>
		<template>
			<div
				class="lexmis_ModalInstance_container">
				<Icon
					v-if="$baseui_theme==='fk'"
					v-bind="iconInfo"/>
				<div v-if="allowHtml" v-html="content" class="lexmis_body"></div>
				<div v-else class="lexmis_body">{{content}}</div>
				<div v-if="$baseui_theme!=='fk'" class="lexmis_foot">
					<Button type="primary" @click="confirm">确定</Button>
					<Button v-if="showCancel" :type="closeType" @click="close">取消</Button>
				</div>
			</div>
		</template>
		<template v-if="$baseui_theme==='fk'" #foot>
			<Button rounded type="primary" @click="confirm">确定</Button>
			<Button v-if="showCancel" rounded :type="closeType" @click="close">取消</Button>
		</template>
	</Modal>
</template>

<script>
import Icon from '../icon';
import Button from '../button';

import Modal from './Modal';

/**
 * @author 唐国雄
 * 弹窗实例(用js的方式生成)
 * 属性----------------------
 * :icon			类型
 * :show-cancel		是否有取消按钮
 * :title			标题
 * :content			内容
 * :on-confirm		确定回调
 * :on-close		关闭回调
 * :allow-html		内容是否允许html
 * 事件----------------------
 * @hidden		隐藏动画完毕
 */
export default {
	name:'ModalInstance',
	components:{
		Modal,
		Icon,
		Button,
	},
	props:{
		//类型
		icon:String,
		//是否有取消按钮
		showCancel:Boolean,
		//标题
		title:String,
		//内容
		content:String,
		//确定回调
		onConfirm:Function,
		//关闭回调
		onClose:Function,
		//内容是否允许html
		allowHtml:Boolean,
	},
	data(){
		return {
			show:false
		};
	},
	computed:{
		iconInfo(){
			switch(this.icon){
				case 'info':
					return {
						name:'info',
						color:'#2d8cf0',
					};
				case 'success':
					return {
						name:'check_circle',
						color:'#19be6b',
					};
				case 'warning':
					return {
						name:'error',
						color:'#f90',
					};
				case 'error':
					return {
						name:'cancel',
						color:'#ed4014',
					};
				default:
					return {
						name:'help',
						color:'#f90',
					};
			}
		},
		//关闭按钮类型(不同主题不一样)
		closeType(){
			if(this.$baseui_theme==='fk'){
				return 'error';
			}
			return 'default';
		},
	},
	mounted(){
		this.$nextTick(function(){
			this.show=true;
		});
	},
	destroyed(){
		this.$el.remove();
	},
	methods:{
		$_lexmis_hidden(){
			this.$emit('hidden');
		},
		confirm(){
			this.show=false;
			this.onConfirm();
		},
		close(){
			this.show=false;
			this.onClose();
		},
	}
};
</script>
